<template>
  <div>
    <a-modal
      :title="title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="close"
      :destroyOnClose="true"
      :maskClosable="false"
      :width="width"
      :zIndex="zIndex"
      :dialogClass="dialogClass"
      :class="{'is-modal-footer': !footer}"
    >
      <slot></slot>
      <template slot="footer">
        <slot name="footer"></slot>
      </template>
    </a-modal>
  </div>
</template>
<script>
export default {
  name: "Modal",
  props: {
    // 标题
    title: {
      type: String,
      default: "标题"
    },
    // 宽度
    width: {
      type: Number,
      default: 640
    },
    //可用于设置浮层的类名
    dialogClass: {
      type: String,
      default: ""
    },
    // 底部
    footer: {
      type: Boolean,
      default: true  //默认显示底部 
    },
    // 确定按钮 loading
    confirmLoading: {
      type: Boolean,
      default: false
    },
    // 层级
    zIndex: {
      type: Number,
      default: 1000  //默认显示底部 
    },
  },
  data() {
    return {
      visible: false
      // confirmLoading: false
    };
  },
  created() {
    // if (this.width > this.$config.modalWidth.large) {
    //   this.width = this.$config.modalWidth.large;
    // }
    // if (this.width < this.$config.modalWidth.small) {
    //   this.width = this.$config.modalWidth.small;
    // }
  },
  mounted() {},
  methods: {
    show() {
      this.visible = true;
    },
    close() {
      this.visible = false;
      this.$emit("close");
    },
    handleOk() {
      this.$emit("ok");
    }
  }
};
</script>
<style lang="less" scoped>
.is-modal-footer {
  /deep/.ant-modal-footer{
    display: none;
  }
}
</style>
